<template>
	<transition class="animate__animated" enter-active-class="animate__flipInY" leave-active-class="animate__flipOutY">
		<view class=" session_right_add" v-show="show">
			<view class="session_right_add__item" @tap="sendChat">
				<text class="icon iconfont icon-xiaoxi-zhihui"></text>
				<text class="session_right_add__item__text">发起聊天</text>
			</view>
			<view class="session_right_add__item" @tap="createGroup">
				<text class="icon iconfont icon-wodewo" ></text>
				<text class="session_right_add__item__text">创建群组</text>
			</view>
			<view class="session_right_add__item" @tap="addUser">
				<text class="icon iconfont icon-tianjiahaoyou"></text>
				<text class="session_right_add__item__text">添加好友</text>
			</view>
		</view>
	</transition>
</template>

<script setup>
	const props = defineProps({
	show:{
		type:Boolean,
		required:true,
	}	
	})
	const emits = defineEmits(["update:show"])
	/**
	 * 发起聊天
	 */
	function sendChat(){
		emits('update:show',false)
		uni.navigateTo({
			url:"/pages/sendChat/sendChat?isSelect="+false
		})
	}
	/**
	 * 创建群组
	 */
	function createGroup(){
		emits('update:show',false)
		uni.navigateTo({
			url:"/pages/sendChat/sendChat?isSelect="+true
		})
	}
	/**
	 * addUser
	 */
	function addUser(){
		emits('update:show',false)
		uni.navigateTo({
			url:"/pages/addUser/addUser"
		})
	}
	
</script>

<style lang="scss" scoped>
.session_right_add {
	position: fixed;
	top: 0upx;
	right: 20upx;
	background-color: #000;
	color: #fff;
	padding: 4upx 20upx;
	border-radius: 10upx;
	&::before{
		content: "";
		position: absolute;
		top: -17upx;
		right: 10upx;
		border: 5px solid transparent;
		border-bottom-color: #000;
	}
	&__item{
		display: flex;
		align-items: center;
		gap: 10upx;
		&__text{
			font-size: 20upx;
			padding: 20upx 0;
			border-bottom: 1px solid #222;
		}
		>.icon{
			font-size: 40upx;
		}
	}
}
</style>
